<%= content_tag :div, class: classes, data: data_attributes do %>
  <%= render Avo::CoverPhotoComponent.new cover_photo: @cover_photo %>
  <%= render Avo::PanelHeaderComponent.new(
    name: @name,
    description: @description,
    display_breadcrumbs: @display_breadcrumbs,
    profile_photo: @profile_photo,
    external_link: @external_link,
    discreet_information: @discreet_information
  ) do |header| %>
    <% if name_slot.present? %>
      <% header.with_name_slot do %>
        <%= name_slot %>
      <% end %>
    <% end %>
    <% if tools.present? %>
      <% header.with_tools do %>
        <%= tools %>
      <% end %>
    <% end %>
  <% end %>
  <% if body? %>
    <div data-target="panel-body" class="<%= class_names("flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:gap-4 w-full", "has-sidebar": sidebar?) %>">
      <div class="<%= class_names("relative flex-1 w-full", "sm:w-2/3": sidebar?) %>">
        <%# The body is wrapped inside another div in order to avoid long & tall panels next to sidebars when the sidebar taller. %>
        <div class="relative <%= white_panel_classes %> <%= @body_classes %>">
          <%= body %>
        </div>
      </div>
      <% if sidebar? %>
        <div class="max-w-full sm:w-1/3 flex-shrink-0 h-full">
          <%= sidebar %>
        </div>
      <% end %>
      <% if bare_sidebar? %>
        <div class="max-w-full sm:w-1/3 flex-shrink-0 h-full">
          <%= bare_sidebar %>
        </div>
      <% end %>
    </div>
  <% end %>
  <% if bare_content? %>
    <%= content_tag :div, class: class_names("relative flex flex-1 flex-col", "has-sidebar": sidebar?), data: {
      target: :"panel-bare-content"
    } do %>
      <%= bare_content %>
    <% end %>
  <% end %>
  <% if footer_tools? %>
    <div
      data-target="panel-footer-tools"
      class="flex-1 w-full flex flex-col sm:flex-row xl:justify-end sm:items-end space-y-2 sm:space-y-0 sm:space-x-2 mt-4 xl:mt-0">
      <%= footer_tools %>
    </div>
  <% end %>
  <% if footer? %>
    <div class="flex justify-end w-full">
      <div>
        <%= footer %>
      </div>
    </div>
  <% end %>
<% end %>
